//
//  MediaPage.swift
//  PracticeDemo
//
//  Created by 顾浩然 on 2025/1/25.
//

import SwiftUI

struct MediaPage: View {
    var body: some View {
        VStack{
            HStack{
                Image("food")
                    //自动适应缩放 填满整个屏幕
                    .resizable()
                    //保持宽高比 会有黑边
                    .scaledToFit()
                    .frame(
                        width: 50,
                        height: 50
                    )
                    .background(Color.black)
                
                //引用系统图标
                Image(systemName: "star.fill")
                    .resizable()
                    .scaledToFit()
                    .frame(
                        width: 50,
                        height: 50)
                    .foregroundColor(Color.yellow)
                
                Image("cat")
                    //平铺图像
                    .resizable(resizingMode: .tile)
                    .frame(width: 50 , height: 50)
            }
            
            Text("带有背景图的Text")
                .font(.title)
                .padding()
                .background(
                    //加个背景图
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color.blue)
                )
            
            HStack{
                //显示矩形
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 50, height: 50)
                //显示圆形
                Circle()
                    .fill(Color.green)
                    .frame(width: 50, height: 50)
                //显示圆角矩形
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .frame(width: 50, height: 50)
                //显示椭圆
                Capsule()
                    .fill(Color.yellow)
                    .frame(width: 100, height: 50)
            }
            
            //加载远程图像
            AsyncImage(url: URL(string: "https://avatars.githubusercontent.com/u/1680272?v=1")!) { image in
                image
                    //自适应图像
                    .resizable()
                    .scaledToFit()
                    //裁剪为圆形
                    .clipShape(Circle())
            } placeholder: {
                //加载状态
                VStack{
                    ProgressView()
                    Text("Loading...")
                }
            }.frame(width: 120 , height:120)
        }
    }
}

struct MediaPage_Previews: PreviewProvider {
    static var previews: some View {
        MediaPage()
    }
}
